{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-right">
        <button type="submit" form="form-option" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-light"><i class="fas fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fas fa-pencil-alt"></i> {{ text_form }}</div>
      <div class="card-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-option">
          <fieldset>
            <legend>{{ text_option }}</legend>
            <div class="form-group row required">
              <label class="col-sm-2 col-form-label" for="input-name">{{ entry_name }}</label>
              <div class="col-sm-10">
                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/>
				{% if error_name %}
              		<div class="invalid-tooltip">{{ error_name }}</div>
              	{% endif %}
              </div>
            </div>
            <div class="form-group row">
			  <label class="col-sm-2 col-form-label" for="input-option-group">{{ entry_option_group }}</label>
			  <div class="col-sm-10">
				<select name="option_group_id" id="input-option-group" class="form-control">
				  {% for option_group in option_groups %}
					{% if option_group.option_group_id == option_group_id %}
					  <option value="{{ option_group.option_group_id }}" selected="selected">{{ option_group.name }}</option>
					{% else %}
					  <option value="{{ option_group.option_group_id }}">{{ option_group.name }}</option>
					{% endif %}
				  {% endfor %}
				</select>
				{% if error_option_group %}
				  <div class="invalid-tooltip">{{ error_option_group }}</div>
				{% endif %}
			  </div>
			</div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="input-sort-order">{{ entry_sort_order }}</label>
              <div class="col-sm-10">
                <input type="text" name="sort_order" value="{{ sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order" class="form-control"/>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_value }}</legend>
            <table id="option-value" class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <td class="text-left required">{{ entry_option_value }}</td>
                  <td class="text-center">{{ entry_image }}</td>
                  <td class="text-right">{{ entry_sort_order }}</td>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                {% set option_value_row = 0 %}
                {% for option_value in option_values %}
                  <tr id="option-value-row{{ option_value_row }}">
                    <td class="text-center"><input type="hidden" name="option_value[{{ option_value_row }}][option_value_id]" value="{{ option_value.option_value_id }}"/>
					  <div class="input-group">
					  <input type="text" name="option_value[{{ option_value_row }}][name]" value="{{ option_value.name }}" placeholder="{{ entry_option_value }}" class="form-control"/>
					  {% if error_option_value[option_value_row] %}
					  <div class="invalid-tooltip">{{ error_option_value[option_value_row] }}</div>
					  {% endif %}
					  </div>
                    </td>
                    <td class="text-left">
                      <div class="card">
                        <img src="{{ option_value.thumb }}" alt="" title="" id="thumb-image{{ option_value_row }}" data-placeholder="{{ placeholder }}" class="card-img-top"/> <input type="hidden" name="option_value[{{ option_value_row }}][image]" value="{{ option_value.image }}" id="input-image{{ option_value_row }}"/>
                        <div class="card-body">
                          <button type="button" data-toggle="image" data-target="#input-image{{ option_value_row }}" data-thumb="#thumb-image{{ option_value_row }}" class="btn btn-primary btn-sm btn-block"><i class="fas fa-pencil-alt"></i> {{ button_edit }}</button>
                          <button type="button" data-toggle="clear" data-target="#input-image{{ option_value_row }}" data-thumb="#thumb-image{{ option_value_row }}" class="btn btn-warning btn-sm btn-block"><i class="fas fa-trash-alt"></i> {{ button_clear }}</button>
                        </div>
                      </div>
                    </td>
                    <td class="text-right"><input type="text" name="option_value[{{ option_value_row }}][sort_order]" value="{{ option_value.sort_order }}" class="form-control"/></td>
                    <td class="text-right"><button type="button" onclick="$('#option-value-row{{ option_value_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fas fa-minus-circle"></i></button></td>
                  </tr>
                  {% set option_value_row = option_value_row + 1 %}
                {% endfor %}
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3"></td>
                  <td class="text-right"><button type="button" onclick="addOptionValue();" data-toggle="tooltip" title="{{ button_option_value_add }}" class="btn btn-primary"><i class="fas fa-plus-circle"></i></button></td>
                </tr>
              </tfoot>
            </table>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
var option_value_row = {{ option_value_row }};

function addOptionValue() {
	html = '<tr id="option-value-row' + option_value_row + '">';
	html += '  <td class="text-left"><input type="hidden" name="option_value[' + option_value_row + '][option_value_id]" value="" />';
	html += '      <input type="text" name="option_value[' + option_value_row + '][name]" value="" placeholder="{{ entry_option_value }}" class="form-control" />';
	html += '  </td>';
	html += '  <td class="text-center">';
	html += '    <div class="card">';
	html += '      <img src="{{ placeholder }}" alt="" title="" id="thumb-image' + option_value_row + '" data-placeholder="{{ placeholder }}" class="card-img-top"/>';
	html += '      <input type="hidden" name="option_value[' + option_value_row + '][image]" value="" id="input-image' + option_value_row + '"/>';
	html += '      <div class="card-body">';
	html += '        <button type="button" data-toggle="image" data-target="#input-image' + option_value_row + '" data-thumb="#thumb-image' + option_value_row + '" class="btn btn-primary btn-sm btn-block"><i class="fas fa-pencil-alt"></i> {{ button_edit }}</button>';
	html += '        <button type="button" data-toggle="clear" data-target="#input-image' + option_value_row + '" data-thumb="#thumb-image' + option_value_row + '" class="btn btn-warning btn-sm btn-block"><i class="fas fa-trash-alt"></i> {{ button_clear }}</button>';
	html += '      </div>';
	html += '    </div>';
	html += '  </td>';
	html += '  <td class="text-right"><input type="text" name="option_value[' + option_value_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control" /></td>';
	html += '  <td class="text-right"><button type="button" onclick="$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fas fa-minus-circle"></i></button></td>';
	html += '</tr>';

	$('#option-value tbody').append(html);

	option_value_row++;
}

//--></script>
{{ footer }} 